<!--2-14两级行星轮+两级NGW型平行轴传动比分配-->
<template>
    <div class="borde" style="width: 100%; height: 100%;font-size: 16px;display: flex;">
        <div class="main">
            <a-row class="all_row">
                <a-col span="10"  class="col_left">

                    <div class="l_top">
                        <div class="l_top_left">
                            <div class="l_top_l_top">
                                <label class="l_top_title">输入参数</label>
                            </div>
                            <div class="l_top_l_bottom">
                                <div class="l_top_l_bottom1">
                                    <div class="l_top_l_bottom1_left">不均载系数</div>
                                    <div class="l_top_l_bottom1_right">
                                        <div class="l_top_l_bottom1_right_body">
                                            <div class="setTitle">齿数比限制值</div>

                                            <div class="setbutton">
                                                <button @click="showModal" class="button1">!</button>
                                                <a-modal title="" :visible="visible" width="620px"
                                                         :confirm-loading="confirmLoading"
                                                         @ok="handleOk" @cancel="handleCancel">
                                                    <img :src="img_one" id="img1" >
                                                </a-modal>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="l_top_l_bottom2">
                                    <div class="l_top_l_bottom2_left">
                                        <ul class="l_top_l_bottom2_left_list_name">
                                            <li>6个行星轮</li>
                                            <li>5个行星轮</li>
                                            <li>4个行星轮</li>
                                            <li>3个行星轮</li>
                                        </ul>
                                    </div>
                                    <div class="l_top_l_bottom2_middle">
                                        <ul class="l_top_l_bottom2_middle_list_input">
                                            <li><input v-model="params_65.bb1"/></li>
                                            <li><input v-model="params_65.bb2"/></li>
                                            <li><input v-model="params_65.bb3"/></li>
                                            <li><input v-model="params_65.bb4"/></li>
                                        </ul>
                                    </div>
                                    <div class="l_top_l_bottom2_right">
                                        <ul class="l_top_l_bottom2_right_list_input">
                                            <li><input v-model="params_65.aa1"/></li>
                                            <li><input v-model="params_65.aa2"/></li>
                                            <li><input v-model="params_65.aa3"/></li>
                                            <li><input v-model="params_65.aa4"/></li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="l_top_l_bottom3">
                                    <div class="l_top_l_bottom3_left">
                                        <ul class="l_top_l_bottom3_list_name">
                                            <li>总传动比</li>
                                            <li>平行轴传动比限制值</li>
                                        </ul>
                                    </div>
                                    <div class="l_top_l_bottom3_right">
                                        <ul class="l_top_l_bottom3_list_input">
                                            <li><input v-model="params_65.R0"/></li>
                                            <li><input v-model="params_65.ratio_parallel"/></li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="l_top_l_bottom4">
                                    <div class="l_top_l_bottom4_right">
                                        <button class="l_top_l_bottom4_button" @click="calculate">计算</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="l_top_right"></div>

                    </div>
                    <div class="l_bottom">
                        <div class="l_bottom_top">以体积最小为目标函数</div>
                        <div class="l_bottom_middle">
                            <div class="l_bottom_middle_body" style=" width: 96%;margin-left: 2%;height: 90%;
                                        margin-top: 1%;box-shadow: 0px 2px 8px rgba(213, 213, 213, 0.349019607843137);">
                                <table style="width: 100%;height: 20%">
                                    <thead style="width: 100%;height: 100%;background: #D7D7D7">
                                    <tr class="table_title" style="width: 100%;height: 100%;text-align: center;">
                                        <th>第1级行星轮个数</th>
                                        <th>第2级行星轮个数</th>
                                        <th>第1级行星轮系齿数比</th>
                                        <th>第2级行星轮系齿数比</th>
                                        <th>第3级平行轴齿数比</th>
                                        <th>第4级平行轴齿数比</th>
                                        <th>总体积表征量</th>
                                    </tr>
                                    </thead>
                                </table>
                                <textarea v-model="dataSource" style="width: 100%;height: 80%;border: 1px solid grey;overflow-y: scroll"></textarea>

                            </div>
                        </div>
                        </div>
                </a-col>
                <a-col span="14" class="col_right">
                    <div class="right">
                        <div class="right_top" style="width: 100%;height: 65%;position: relative">
                            <div class="right_top_body"
                                 style="width: 80%;height: 80%;text-align: center;position: absolute;right: 10%;top: 10%">
                                <img :src="img_two" class="img2_css" style="width: 100%;height: 100%"/>
                            </div>
                        </div>
                        <div class="right_bottom" style="width: 100%;height: 35%;position: relative">
                            <div class="right_bottom_body"
                                 style="width: 90%;height: 90%;text-align: center;position: absolute;left: 5%;">
                                <img :src="img_three" class="img3_css" style="width: 100%;height: 100%">
                            </div>
                        </div>
                    </div>
                </a-col>

            </a-row>
        </div>
    </div>
</template>

<script>
    import img_three from '@/assets/image/image_65_1.jpg'
    import img_two from '@/assets/image/image_65_2.png'
    import img_one from '@/assets/image/image_65_3.png'
    import {getans} from "../../../api/file";

    export default {
        created () {
            document.title = '两级行星轮+两级NGW型平行轴传动比分配'
            this.$store.state.file.key = 65
        },
        name: "optiRatio_twoplanet_add_twoparallel_last",
        data(){
            return{
                img_one,
                img_two,
                img_three,
                visible:false,
                confirmLoading:false,
                params_65:this.$store.state.file.dataList[65],
                dataSource:[],
            };
        },
        methods:{
            showModal(){
                this.visible=true;
            },
            handleOk(){
                this.confirmLoading=true;
                setTimeout(() => {
                    this.visible=false;
                    this.confirmLoading=false;
                    }

                );
            },
            handleCancel(){
                this.visible=false;
            },
            calculate(){
                getans(this.$store.state.file.dataList[65]).then(res=>{
                        console.log(res)
                    this.dataSource=res[0];
                }
                ).catch(err=>{
                    this.$message.error(err);
                })
            },

        }
    }

</script>

<style scoped>
    ul,ol,li{
        list-style: none;
    }
    .table_title th
    {
        width: 10%;
        border: 1px solid grey;
    }
    .borde{
        position: relative;
}
    .top{
        width: 100%;
        height: 5%;
        position: absolute;
        top: 0px;
        font-size: 18px;
        background-color: rgba(215,215,215,1);
    }
    .main{
        width: 100%;
        height: 100%;
        /*background-color: rgba(213, 213, 213, 0.349019607843137);*/
        position: absolute;
    }
    .all_row{
        width: 100%;
        height: 100%;
    }
    .col_left{
        height: 100%;
    }
    .l_top{
        width: 100%;
        height: 50%;
        position: relative;

    }
    .l_top_right{
        width: 40%;
        height: 100%;
       position: absolute;
        right: 0;
    }
    .l_top_left{
        width: 60%;
        height: 100%;
        position: absolute;
        left: 0;
        border: 1px solid #dddddd;
        box-shadow: 0px 2px 8px rgba(213, 213, 213, 0.349019607843137);
    }
    .l_top_l_top{
        width: 100%;
        height: 10%;
        background-color: rgba(215,215,215,1);
        font-size: 18px;
        padding-left: 5%;
    }
    .l_top_l_bottom{
        width: 100%;
        height: 90%;
    }
    .l_top_l_bottom1{
        width: 100%;
        height: 12.5%;
        position: relative;
    }
    .l_top_l_bottom1_left{
        width: 60%;
        height: 100%;
        position: absolute;
        left: 0;
        text-align: right;
    }
    .l_top_l_bottom1_right{
        width: 35%;
        height: 100%;
        position: absolute;
        right: 0;
        text-align: left;
    }
    .l_top_l_bottom1_right_body{
        width: 100%;
        height: 100%;
        position: relative;
    }
    .setTitle{
        height: 100%;
        width: 65%;
        position: absolute;
        left: 5%;
    }
    .setbutton{
        height: 100%;
        width: 25%;
        right: 0%;
        position: absolute;
    }
     .button1{
         display: inline-block;
         background-color: rgba(231, 231, 231, 0.486);
        width: 100%;
        height: 70%;
         padding-top: 10%;
         padding-left: 0;
         padding-right: 0;
    }
    .l_top_l_bottom2{
        width: 100%;
        height: 50%;
        position: relative;
    }
    .l_top_l_bottom2_left{
        width: 35%;
        height: 100%;
        position: absolute;
        left: 0;
    }
    .l_top_l_bottom2_left_list_name{
        text-align: right;
    }
    .l_top_l_bottom2_middle{
        width: 30%;
        height: 100%;
        position: absolute;
        right: 35%;
        left: 35%;
    }
    .l_top_l_bottom2_middle_list_input{
        text-align: center;
    }
    .l_top_l_bottom2_right{
        width: 35%;
        height: 100%;
        position: absolute;
        right: 0;
    }
    .l_top_l_bottom2_right_list_input{
        text-align: center;
    }
    .l_top_l_bottom2_left_list_name li,.l_top_l_bottom2_middle_list_input li,.l_top_l_bottom2_right_list_input li{
        margin-top: 3px;
        font-size: 18px;
    }
    .l_top_l_bottom2_middle_list_input input,.l_top_l_bottom2_right_list_input input{
        width: 70%;
        height: 25px;
        border: 1px solid;
        border-color: rgba(220, 220, 220, 1);
        font-size: 14px;
        text-align: center;
    }
    .l_top_l_bottom3{
        width: 100%;
        height: 25%;
        position: relative;
    }
    .l_top_l_bottom3_left{
       width: 60%;
        height: 100%;
        position: absolute;
        left: 0;
    }
    .l_top_l_bottom3_list_name{
        text-align: right;
    }
    .l_top_l_bottom3_right{
        width: 35%;
        height: 100%;
        position: absolute;
        right: 0;
    }
    .l_top_l_bottom3_list_input{
        text-align: center;
    }
    .l_top_l_bottom3_list_name li,.l_top_l_bottom3_list_input li{
        margin-top: 3px;
        font-size: 18px;
    }
    .l_top_l_bottom3_list_name input,.l_top_l_bottom3_list_input input{
        width: 70%;
        height: 25px;
        border: 1px solid;
        border-color: rgba(220, 220, 220, 1);
        font-size: 14px;
        text-align: center;
    }
    .l_top_l_bottom4{
        width: 100%;
        height: 12.5%;
        position: relative;
    }
    .l_top_l_bottom4_right{
        width: 35%;
        height: 100%;
        position: absolute;
        right: 0;
        text-align: center;

    }
    .l_top_l_bottom4_button{
        width: 80%;
        font-size: 14px;
        margin-top: 2%;
    }
    .l_bottom{
        width: 100%;
        height: 50%;
        box-shadow: 0px 2px 8px rgba(213, 213, 213, 0.349019607843137);
    }
    .l_bottom_top{
        width: 100%;
        height: 10%;
        background-color: rgba(215,215,215,1);
        padding-left: 3%;
    }
    .l_bottom_middle{
        width: 100%;
        height: 90%;
    }
    .l_bottom_middle_body{
        width: 100%;
        height: 100%;
    }

    .l_bottom_bottom_table{
        width: 100%;
        height: 100%;
        /*height: 78%;*/
        box-sizing: border-box;
        border-width: 2px;
        border-style: solid;
        border-color: rgba(121, 121, 121, 1);
        border-radius: 5px;
    }

    .col_right{
        height: 100%;
    }

    .right{
        width: 100%;
        height: 100%;
        overflow-x:auto;
        overflow-y:auto
    }
</style>